<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'
import MenuRadio from './MenuRadio.vue'
import Submenu from './Submenu.vue'
import MenuCheckbox from './MenuCheckbox.vue'

const options = ref([
  {
    label: '颜色矫正',
    selected: false,
  },
])

const selected = true
</script>

<template>
  <Submenu label="颜色矫正" @click.stop>
    <template #icon>
      <div class="text-media-brand text-primary w-5 h-5">
        <span :class="selected ? '' : 'hidden'">
          <el-icon> <Check /> </el-icon>
        </span>
      </div>
      <media-icon class="h-5 w-5" type="" />
    </template>
    <template #content>
      <ul class="w-full flex flex-col">
        <!-- 颜色矫正 -->
        <li v-for="item in options" class="flex items-center">
          <MenuCheckbox
            :label="item.label"
            :selected="item.selected"
            @select="item.selected = !item.selected"
          />
        </li>
      </ul>
    </template>
  </Submenu>
</template>
